<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js_DOM</title>
</head>
<body>
<div class="div">
    <p class="P1">hello p</p>
    <div class="hhhh"> hello div2
        <a href="/" class="a">hello a</a>
        <div class="div3" id="jj">hello World
        </div>
    </div>
</div>
<script>
//    --------------导航属性------------------
    var ele0=document.getElementsByClassName('hhhh')[0];
    console.log(typeof ele0);
    console.log(ele0);
    console.log(ele0.length);
    console.log('<<<<<<<<<<<');
    console.log(ele0.nodeName);
    console.log(ele0.nodeType);
    console.log(ele0.nodeValue);
    console.log(ele0.innerHTML);

    console.log('------------------');
    //    节点
    var p_ele=ele0.parentNode;
    console.log(p_ele.nodeName);
    //    兄弟节点
    var b_ele=ele0.nextSibling;
    console.log(b_ele.nodeName);
    console.log('>>>>>>>>>');
    //    兄弟节点 nextElementSibling 只会向下查找
    var ele=document.getElementsByClassName('P1')[0];
    var b_ele=ele.nextElementSibling;
    console.log(b_ele.nodeName);
    console.log(b_ele.innerHTML);
    console.log('------------------');

    //    子标签
    console.log(ele0.children);
    console.log('============');
    var chil_ele=ele0.children[0];

    console.log(chil_ele.nodeName);
    console.log(chil_ele.innerHTML);
    console.log('$$$$$$$$$$$$$');
    var chil1_ele=ele0.firstElementChild;
    console.log(chil1_ele.nodeName);
    console.log(chil1_ele.innerHTML);
    console.log('^^^^^^^^^^^^^');
    var last_chil_ele=ele0.lastElementChild;
    console.log(last_chil_ele.nodeName);
    console.log(last_chil_ele.innerHTML);
    console.log("*****************");
    console.log(last_chil_ele.innerText);
    //    --------------------getAttribute---------------------
    console.log(last_chil_ele.getAttribute('id'));
    console.log(last_chil_ele.id);
    console.log(last_chil_ele.className);
    last_chil_ele.classList.add('uu');
    console.log(last_chil_ele.className);
    last_chil_ele.classList.remove('uu');
    console.log(last_chil_ele.className);
    last_chil_ele.innerHTML='<h>hello World 这世界我来了<h/>'








</script>

</body>
</html>